<template>
  <div class="listen">
      <div class="listen-scroll">
        <van-loading type="spinner" size="24px" v-if="!flag" />
        <b-scroll :top="'50px'" :bottom="'50px'" :left="leftList" :right="rightList" @bscroll-nav="jumpRanklist"></b-scroll>
      </div>
  </div>
</template>

<script>
//滑动联动组件
import BScroll from "../common/BScroll.vue"
import {getArtistList,getTopSong} from "../api/player"
import {getArtists} from "../api/listen"
export default {
  name: 'Listen',
  components: {
    BScroll
  },
  data() {
    return {
      //"J","K","L","M","N","O","P","R","S","T",
      //导航数据
      leftList :[ "热","A","B","C" ,"D","E","F","G","H","I",],
      //歌手图片数据
      rightList: [
        // { 数据格式
        //   name:'热',
        //   data :[]
        // }
      ],
      flag:false,
    }
  },
  // beforeRouterEnter(to,from,next) {
  //   getArtistList().then(data=>{
  //     //next
  //     next(vm=>vm.getArtistListFun(data.list))
  //   })
  // },
  methods: {
    //歌手分类查询
    getArtistListFun() {
      let num=1;
      // 从1 表示字母开始
      for(let i=1;i<this.leftList.length;i++) {
        let initial=this.leftList[i];
        getArtistList({
          type:1,
          area:96,
          initial,
          limit:6,
        }).then(data=>{
          // 
          //会出现字母顺序会错乱
          // this.rightList.push({
          //   name: this.leftList[i],
          //   data: data.artists
          // })
          // 找到相同字母的下标 在数组中的位置
          let index=this.rightList.findIndex(item=>item.name==this.leftList[i]);
          //给数组设置新属性 , 给data属性赋值 data.artists数组 ,$set方法更新视图数据 实现数据双向绑定
          this.$set(this.rightList[index],"data",data.artists);
          num++;
          if(num==this.leftList.length) {
            // 显示加载提示
            this.flag=true;
          }

        }) 
      }
    },
    // 遍历字母类型 按字母顺序排列歌手数据
    artistListFun() {
      for(let i=1;i<this.leftList.length;i++) {
        // 将字母按顺序 给歌手数组
        this.rightList.push({
          name:this.leftList[i]
        })
      }
    },
    //热门歌手 获取歌手信息
    getTopSongFun() {
      getTopSong().then(data=>{
        
        this.rightList.unshift({
          name: "热",
          data:data.artists
        })
      })
    },
    //跳转路由
    jumpRanklist(id) {
      
      this.$router.push({name: 'SingerList',query:{id} });
      
    }
  },
  created() {
    //分类歌手
    this.getArtistListFun();
    //热门歌手
    this.getTopSongFun();
    this.artistListFun();
  },
  
}
</script>

<style lang="less">
.listen-scroll{
  font-size:14px;
  touch-action: none;
}
</style>